<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <style>
        body{
            background: url("../img/bg.png");
        }
        .center{
            /*背景颜色*/
            background: white;
            /*宽度*/
            width: 400px;
            /*对齐方式*/
            text-align: center;
            /*外边距*/
            margin: auto;
        }

    </style>
</head>
<body>
<!--顶部公司图标-->
<div>
<img src="../img/logo.png" />
</div>

<!--中间注册信息-->
<div class="center">
<div>
    注册详情
    <hr/>
<!--    表单标签-->
    <form action="#" method="get" autocomplete="on">
        <div>
            <label for="name">姓名:&nbsp;&nbsp;</label>
            <input type="text" id="name" name="name"  placeholder="在此输入姓名" />
        </div>
        <div>
            <label for="password">密码:&nbsp;&nbsp;</label>
            <input type="password" id="password" name="password" placeholder="在此输入密码" />
        </div>
        <div>
            <label for="email">邮箱:&nbsp;&nbsp;</label>
            <input type="email" id="email" name="email" placeholder="在此输入邮箱" />
        </div>

        <div>
            <label for="tel">手机:&nbsp;&nbsp;</label>
            <input type="tel" id="tel" name="tel" placeholder="在此输入手机" />
        </div>
        <hr/>
        <div>
            <label for="sex">性别:&nbsp;&nbsp;</label>
            <input type="radio" id="sex" name="sex" value="man" />男&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <input type="radio" name="sex" value="woman" />女&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        </div>

        <div>
            <label for="hobby">爱好:&nbsp;&nbsp;</label>
            <input type="checkbox" id="hobby" name="hobby" value="music" />音乐
            <input type="checkbox" name="sex" value="movie" />电影
            <input type="checkbox" name="sex" value="game" />游戏
        </div>

        <div>
            <label for="brithday">出生日期:&nbsp;&nbsp;</label>
            <input type="date" id="brithday" name="brithday" />
        </div>

        <div>
            所在城市：<select name="city">
            <option>---请选择所在城市---</option>
            <optgroup label="直辖市">
                <option>A</option>
                <option>B</option>
                <option>C</option>
                <option>D</option>
                <option>E</option>
                <option>F</option>
                <option>G</option>
            </optgroup>
            <optgroup label="省会">
                <option>A</option>
                <option>B</option>
                <option>C</option>
                <option>D</option>
                <option>E</option>
                <option>F</option>
                <option>G</option>
            </optgroup>
        </select>
        </div>

        <hr/>
        <div>
            个性签名:<textarea rows="5" cols="40"></textarea>
        </div>
        <hr/>
        <button type="submit">注册</button>
        <button type="reset">重置</button>


    </form>
</div>
</div>
</body>
</html>